<div class="item-header">
  <span>入库详情</span>
  <button nz-button [nzType]="'primary'" type="button" (click)="addItem()">添加</button>
</div>
<nz-table>
  <thead>
    <tr>
      <th>序号</th>
      <th>物料名称</th>
      <th>物料分类</th>
      <th>物料小类</th>
      <th>物料编码</th>
      <th>规格型号</th>
      <th>单位</th>
      <th>单价</th>
      <th>数量</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let data of materials, let idx = index">
      <td>{{ idx + 1 }}</td>
      <td>{{ data.name }}</td>
      <td>{{ data.type }}</td>
      <td>{{ data.childType }}</td>
      <td>{{ data.code }}</td>
      <td>{{ data.specification }}</td>
      <td>{{ data.unit }}</td>
      <td>
        <nz-form-item>
          <nz-form-control nzHasFeedback [nzErrorTip]="priceError">
            <nz-input-number [(ngModel)]="data.price" [nzMin]="0" [nzStep]="1" (ngModelChange)="setTotalPrice()"
              appMoreThanZero required >
            </nz-input-number>
            <!-- 单价的错误信息会以文本提示，交互较好但会改动行高（因设置了CSS固定了非错误状态下提示信息区域不占用位置） -->
            <ng-template #priceError let-control>
              <ng-container *ngIf="control.hasError('required')">请输入单价！</ng-container>
              <ng-container *ngIf="control.hasError('moreThanZero') && !control.hasError('required')">单价不能为零！</ng-container>
            </ng-template>
          </nz-form-control>
        </nz-form-item>
      </td>
      <td>
        <nz-form-item>
          <nz-form-control nzHasFeedback>
            <!-- 只通过antd的nzHasFeedback来动态表示验证是否通过。缺点是没有提示文字 -->
            <nz-input-number [(ngModel)]="data.quantity" [nzMin]="0" [nzStep]="1" (ngModelChange)="setTotalPrice()"
              appMoreThanZero required>
            </nz-input-number>
          </nz-form-control>
        </nz-form-item>
      </td>
    </tr>
  </tbody>
</nz-table>